<template>
    <div class="tasks">
      <appHeader :titles='"任务列表"'/>
      <ul class='taskList'>
        <li>
          <div class="taskContent">
            <h4>任务一：邀请注册赚伙食费</h4>
            <button>去报名</button>
          </div>
        </li>
      </ul>
       <appFooter/>
    </div>
</template>
<script>
import appHeader from '../header/header'
import appFooter from '../footer/appFooter'
export default {
  name: 'task',
  components: {
    appHeader,
    appFooter
  }
}
</script>
<style lang='scss' scoped>
$em-base: 75;
@import '../../common/mixin/_bourbon.scss';
.taskList {
  padding: rem(30px) rem(26px);
  li {
    height: rem(124px);
    border-left: 2px solid #f8c84c;
    background: #ffffff;

    .taskContent {
      display: flex;
      position: relative;
      h4 {
        font-size: 16px;
        height: 100%;
        line-height: rem(124px);
        color: #666666;
        margin-left: rem(30px);
      }
      button {
        width: rem(124px);
        height: rem(54px);
        background: #f8c84c;
        color: #ffffff;
        outline: none;
        border: none;
        border-radius: 3px;
        position: absolute;
        right: rem(30px);
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>

